// setState修改状态
// setState修改更新视图
// this.setState({属性名：值})
// react不能直接修改state，只能setState修改数据更新视图

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';
class Handler extends React.Component {
  state = {
    count: 0,
  };
  // 这种写法是class组件写法
  handlerClick = (num) => {
    console.log('this.state.count----->', this.state.count);
    this.setState({
      count: this.state.count + num,
    });
  };
  // 这种写法是Hooks组件写法
  // const handlerClick = (num) => {
  //   console.log('this.state.count----->', this.state.count);
  //   this.setState({
  //     count: this.state.count + num,
  //   });
  // };
  handlerClick2 = (num) => {
    this.setState({
      count: this.state.count - num,
    });
  };
  render() {
    return (
      <div>
        <p>当前数值为：{this.state.count}</p>
        <hr />
        <button onClick={() => this.handlerClick(1)}>+1</button>
        <span>{this.state.count}</span>
        <button onClick={() => this.handlerClick2(1)}>-1</button>
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
